<template>
  <!--商品评价开始-->
  <div class="rate-wrapper" v-if="Object.keys(info).length">
    <div class="title-wrapper">
      <h3 class="title">商品评价</h3>
      <span class="comment-count">({{info.item.commentCount}})</span><!--评价总数-->
    </div>
    <div class="comment-content-wrapper">
      <div class="rate-keywords"><!--评价关键词-->
        <div class="rate-keyword" v-for="(item, index) of info.rate.keywords" :key="index">
          <span>{{item.word}}</span><span>({{item.count}})</span>
        </div>
      </div>
      <div class="comment-content-item"
        v-for="(item,index) of info.rate.rateList"
        :key="index">
        <div class="user-info"><!--用户信息-->
          <div class="user-head-pic-wrapper"><!--用户头像-->
            <img :src="item.headPic" alt="" class="head-pic">
          </div>
          <div class="username">{{item.userName}}</div><!--用户名-->
        </div>
        <div class="rate-content">{{item.content}}</div><!--评价的具体内容-->
        <div class="date-and-shop-name"><!--评价日期和商品简称-->
          <span class="rate-time">{{item.dateTime}}</span>
          <span class="shop-short-name">{{item.shortTitle}}</span>
        </div>
      </div>
    </div>
  </div>
  <!--商品评价结束-->
</template>
<script>
export default {
  name: 'productRate',
  props: {
    info: Object
  },
  watch: {
    info (value) {
      console.log('rate', value)
    }
  }
}
</script>
<style lang="stylus" scoped>
.rate-wrapper
  padding 10px
  .title-wrapper
    display flex
    font-size 14px
    margin-bottom 10px
  .comment-content-wrapper
    .rate-keywords
      display flex
      flex-wrap wrap
      .rate-keyword
        border-radius 5px
        background rgba(255,192,203,0.5)
        height 30px
        line-height 30px
        padding 0 10px
        margin 0 10px 10px 0
        font-size 16px
    .comment-content-item
      padding-bottom 10px
      .user-info
        display flex
        align-items center
        padding-bottom 10px
        .user-head-pic-wrapper
          width 30px
          height 30px
          border-radius 50%
          overflow hidden
          margin-right 10px
          .head-pic
            width 100%
            height 100%
        .username
          font-size 20px
      .rate-content
        font-size 12px
        line-height 1.5
      .date-and-shop-name
        display flex

</style>
